<!doctype html>
<html lang="zh-CN">

<head>
    <title>账号信息</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/el/index.css">
    <link rel="stylesheet" href="./css/left-controll.css">
    <link rel="stylesheet" href="./css/right-top.css">
    <link rel="stylesheet" href="./css/account.css">
</head>

<body>
    <div id='app' v-cloak>


        <!-- 更换绑定手机号 -->
        <div id='mask' v-if='offMask==1'></div>
        <transition enter-active-class='animated bounceInDown' leave-active-class='animated fadeOutUp'>
            <div id='mask-1' v-if='offMask==1'>
                <div class='mask-con'>
                    <div class='dis-spa edit-tit'>
                        <span style="opacity:0;">1</span>
                        <span>更换绑定手机号</span>
                        <img class='hover' @click='offMask=false;' src="./img/close.svg" style="width:22px;height:22px;">
                    </div>
                    <div class='mask-con-wrap'>
                        <div class='edit-input'>
                            <input type="text" placeholder="原手机号/账号">
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="密码">
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="新手机号/账号">
                        </div>
                        <div class='dis-spa edit-invi-code'>
                            <input type="text" placeholder="验证码">
                            <span class='hover'>获取验证码</span>
                        </div>
                        <p class='edit-noti'>这里是一条提示内容</p>
                        <div class='edit-sure'>
                            <button>确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 更换绑定手机号 -->


        <!-- 修改登陆密码 -->
        <div id='mask' v-if='offMask==2'></div>
        <transition enter-active-class='animated bounceInDown' leave-active-class='animated fadeOutUp'>
            <div id='mask-1' v-if='offMask==2'>
                <div class='mask-con'>
                    <div class='dis-spa edit-tit'>
                        <span style="opacity:0;">1</span>
                        <span>修改登陆密码</span>
                        <img class='hover' @click='offMask=false;' src="./img/close.svg" style="width:22px;height:22px;">
                    </div>
                    <div class='mask-con-wrap'>
                        <div class='edit-input'>
                            <input type="text" placeholder="手机号/账号">
                        </div>
                        <div class='dis-spa edit-invi-code'>
                            <input type="text" placeholder="验证码">
                            <span class='hover'>获取验证码</span>
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="新密码（8至20位字母或数字）">
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="确认新密码">
                        </div>
                        <p class='edit-noti'>这里是一条提示内容</p>
                        <div class='edit-sure'>
                            <button>确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 修改登陆密码 -->

        <!-- 修改交易密码 -->
        <div id='mask' v-if='offMask==3'></div>
        <transition enter-active-class='animated bounceInDown' leave-active-class='animated fadeOutUp'>
            <div id='mask-1' v-if='offMask==3'>
                <div class='mask-con'>
                    <div class='dis-spa edit-tit'>
                        <span style="opacity:0;">1</span>
                        <span>修改交易密码</span>
                        <img class='hover' @click='offMask=false;' src="./img/close.svg" style="width:22px;height:22px;">
                    </div>
                    <div class='mask-con-wrap'>
                        <div class='edit-input'>
                            <input type="text" placeholder="手机号/账号">
                        </div>
                        <div class='dis-spa edit-invi-code'>
                            <input type="text" placeholder="验证码">
                            <span class='hover'>获取验证码</span>
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="新密码（8至20位字母或数字）">
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="确认新密码">
                        </div>
                        <p class='edit-noti'>这里是一条提示内容</p>
                        <div class='edit-sure'>
                            <button>确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 修改交易密码 -->


        <div class='dis-spa' style="align-items:flex-start;">

            <!-- 左边导航 -->
            <left-controll active='2'></left-controll>
            <!-- 左边导航 -->

            <!-- 右边类容 -->
            <div class='content-wrap-right' id='con-right'>

                <!-- 充值提现公告头部 -->
                <right-top ref='comHea'></right-top>
                <!-- 充值提现公告头部 -->

                <div id='account-content' class='dis-cen'>
                    <div>
                        <div class='dis-spa account-intro'>
                            <div>
                                <p>账户余额</p>
                                <div class='dis-spa'>
                                    <span>￥125.4445</span>
                                    <a href="#" @click="rech('充值')">充值</a>
                                </div>
                            </div>
                            <div>
                                <p>账户余额</p>
                                <div class='dis-spa'>
                                    <span>￥125.4445</span>
                                    <a href="#" @click="rech('提现')">提现</a>
                                </div>
                            </div>
                        </div>
                        <div>
                            <h4 class='ac-tit'>账户信息</h4>
                            <div class='dis-spa set-list'>
                                <input type="file" style="position:fixed;left:10000px;opacity:0;" id='up-file'>
                                <p class='dis-start'><span>头像</span><img src="./img/ava.png" style="width:50px"></p>
                                <p class='dis-start' @click="$('#up-file').click();"><span>上传图片</span><img src="./img/right.svg" style="width:18px;height:18px;"></p>
                            </div>
                            <div class='dis-spa set-list '>
                                <p class='dis-start'><span>绑定手机号</span><span>184*****415444</span></p>
                                <p class='dis-start' @click='offMask=1'><span>更换绑定</span><img src="./img/right.svg" style="width:18px;height:18px;"></p>
                            </div>
                            <div class='dis-spa set-list '>
                                <p class='dis-start'><span>登陆密码</span><span>*********</span></p>
                                <p class='dis-start' @click='offMask=2'><span>修改密码</span><img src="./img/right.svg" style="width:18px;height:18px;"></p>
                            </div>
                        </div>
                        <div>
                            <h4 class='ac-tit'>交易密码设置</h4>
                            <div class='dis-spa set-list set-trans'>
                                <p class='dis-start'><span>交易密码</span><span>***************</span></p>
                                <p class='dis-spa' @click='offMask=3'>
                                    <span>修改交易密码</span>
                                    <img src="./img/right.svg" style="width:18px;height:18px;">
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右边类容 -->
        </div>
    </div>
    <script src="./js/vue.min.js"></script>
    <script src="./component/left-controll.js"></script>
    <script src="./component/right-top.js"></script>
    <script src="./js/el/index.js"></script>
    <script src='./js/jquery.min.js'></script>
    <script src="./js/jquery.mytooltip.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                //各种弹窗控制     1：绑定手机号弹窗  2:登录密码弹窗   3：交易密码弹窗
                offMask: false,
            },
            methods: {
                //充值/提现
                rech: function(tit) {
                    //直接跑去头部封装的组件把充值和提现索引传进去自己判断（因为这里的充值提现和头部里面的充值提现逻辑一摸一样）
                    this.$refs.comHea.rech(tit);
                }
            }
        });
    </script>

</body>

</html>